

<template>
  <div class="auth-wrapper d-flex align-center justify-center pa-4">
    <VCard
      class="auth-card pa-4 pt-7"
      max-width="448"
    >
      <VCardItem class="justify-center">
        <template #prepend>
          <div class="d-flex">
            <div
              class="d-flex text-primary"
              v-html="logo"
            />
          </div>
        </template>

        <VCardTitle class="text-2xl font-weight-bold">
          房地产项目设计流程管理系统
        </VCardTitle>
      </VCardItem>

      <VCardText class="pt-2">
        <h5 class="text-h5 mb-1">
          请从这里创建账户 !🚀
        </h5>
        <p class="mb-0">
          让创建账户的过程变得简单而快乐
        </p>
      </VCardText>

      <VCardText>
        <VForm @submit.prevent="$router.push('/')">
          <VRow>
            <!-- 用户名 -->
            <VCol cols="12">
              <VTextField
                v-model="form.username"
                autofocus
                label="用户名"
                placeholder="David"
              />
            </VCol>
            <!-- 邮箱 -->
            <VCol cols="12">
              <VTextField
                v-model="form.email"
                label="邮箱"
                placeholder="example@email.com"
                type="email"
              />
            </VCol>

            <!-- 密码 -->
            <VCol cols="12">
              <VTextField
                v-model="form.password"
                label="密码"
                placeholder="············"
                :type="isPasswordVisible ? 'text' : 'password'"
                :append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
                @click:append-inner="isPasswordVisible = !isPasswordVisible"
              />
              <div class="d-flex align-center mt-1 mb-4">
                <VCheckbox
                  id="privacy-policy"
                  v-model="form.privacyPolicies"
                  inline
                />
                <VLabel
                  for="privacy-policy"
                  style="opacity: 1;"
                >
                  <span class="me-1">我同意</span>
                  <a
                    
                    class="text-primary"
                  >用户协议 & 隐私政策</a>
                </VLabel>
              </div>

              <VBtn
                block
                @click="openDialog"
              >
                注册
              </VBtn>

            </VCol>

            <!-- login instead -->
            <VCol
              cols="12"
              class="text-center text-base"
            >
              <span>已经有账户 ?</span>
              <RouterLink
                class="text-primary ms-2"
                to="/login"
              >
                去登录
              </RouterLink>
            </VCol>

            <VCol
              cols="12"
              class="d-flex align-center"
            >
              <VDivider />
              <span class="mx-4">or</span>
              <VDivider />
            </VCol>

            <!-- auth providers -->
            <VCol
              cols="12"
              class="text-center"
            >
              <AuthProvider />
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
    </VCard>
    <!-- 邮箱验证码弹窗 -->
    <VDialog v-model="dialog" max-width="450">
<v-card
    class="py-8 px-6 text-center mx-auto ma-4"
    elevation="12"
    max-width="400"
    width="100%"
  >
    <h3 class="text-h6 mb-4">验证你的邮箱</h3>

    <div class="text-body-2">
      我们已经将验证码发送至 john..@gmail.com <br>

      请检查您的电子邮件并粘贴验证码到下面的输入框中
    </div>

    <v-sheet color="surface">
      <v-otp-input
        type="password"
      ></v-otp-input>

    </v-sheet>

    <v-btn
      class="my-4"
      height="40"
      text="验证"
    ></v-btn>

    <div class="text-caption">
      没有收到验证码? <a href="#" @click.prevent="otp = ''">重新发送</a>
    </div>
  </v-card>
    </VDialog>
  </div>
</template>

<script setup lang="ts">

import AuthProvider from '@/views/pages/authentication/AuthProvider.vue';
import logo from '@images/logo.svg?raw';
const isPasswordVisible = ref(false)
const dialog = ref(false)
const form = ref({
  username: '',
  email: '',
  password: '',
  privacyPolicies: false,
  code: ''
})

const openDialog = () => {
  // 在这里发送验证码到用户的邮箱
  dialog.value = true
}

const verifyCode = () => {
  // 在这里验证用户输入的验证码
  console.log('verify code')
}
</script>
<style lang="scss">
@use "@core/scss/template/pages/page-auth.scss";
</style>
